<template>
	<view class="homeLayout pageBg">
		<custom-nav-bar title="与麒同行"></custom-nav-bar>
		<view class="banner">
			<swiper indicator-dots circular indicator-color="rgba(255,255,255,0.5)"
			indicator-active-color="#fff" autoplay interval=2000>
				<swiper-item v-for="item in 5">
					<image src="../../common/images/banner1.jpg" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="notice">
			<view class="left">
				<uni-icons type="sound-filled" size="20"></uni-icons>
				<text class="text">公告</text>
			</view>
			<view class="center">
				<swiper vertical autoplay interval=2000 circular>
					<swiper-item v-for="item in 5">
						公告内容公告内容~
					</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="right" size="20" color="#333"></uni-icons>				
			</view>
		</view>		
		<view class="square">
			<common-title>
				<template #name>最新发布</template>
				<template #custom>
					<navigator url="" class="more">More+</navigator>
				</template>
			</common-title>
			<view class="content">
				<travel-item v-for="item in newTripList" :key="item._id" :item="item"></travel-item>
			</view>
		</view>
		<!-- 悬浮组件 -->
		<!-- <float></float> -->
		<float-form></float-form>
		
	</view>
</template>

<script setup>
import { ref } from "vue";
import {onReachBottom} from "@dcloudio/uni-app"
import {DriverTags, PassengeTags} from "@/common/js/common-const.js"
const newTripList = ref([]);
const noNewData = ref(false);

const db = uniCloud.database()

defineProps({
	item:{
		type:Object,
		default(){
			return{
				tripType: 0,
				startLc: "",
				endLc:"",
				timeRange:[],
				
				picurl:"../../common/images/classify1.jpg",
				updateTime:Date.now() - 1000*60*60*5
			}
		}
	}
})


let selectedKeys = ["101", "103"];
const queryParams = ref({
	pageNum: 1,
	pageSize: 5
})



const arr = DriverTags.filter(({key, text})=>{
	 return selectedKeys.includes(key);
})



// 获取最新的行程数据
const getNewData = async function(){
	let current = queryParams.value.pageSize * (queryParams.value.pageNum - 1);
	let res = await db.collection('trip')
	.orderBy("createTs desc")
	.skip(current)
	.limit(queryParams.value.pageSize)
	.get();
	console.log(res);
	if(res.result.errCode === 0){
		newTripList.value = [...newTripList.value, ...res.result.data];
		if(queryParams.value.pageSize > res.result.data.length){
			noNewData.value = true;
		}		
	}else{
		uni.showToast({
			title: "返回有误，请稍后重试"
		})
	}
	 
}

// 触底加载更多
onReachBottom(()=>{
	if(noNewData.value){
		// 如果上一次加载的数据少于pageSize，本次将不会继续加载；
		return;
	}
	queryParams.value.pageNum++;
	getNewData(); 
	console.log(newTripList.value);
	
})

getNewData();


//点击回到顶部
const onTop = ()=>{
	uni.pageScrollTo({
		scrollTop:0,
		duration:100
	})
}	

</script>

<style lang="scss" scoped>
.homeLayout{
	.banner{
		width: 750rpx;
		padding: 30rpx 0;	// 上下间隔30，左右贴边
		swiper{
			width: 750rpx;
			height: 340rpx;
			swiper-item{
				width: 100%;
				height: 100%;
				padding: 0 30rpx;
				image{
					width: 100%;
					height: 100%;	
					border-radius: 10rpx;
				}
			}
		}
	}
	.notice{
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #f9f9f9;
		margin: 0 auto;
		border-radius: 80rpx;
		display: flex;
		.left{
			width: 140rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// 穿透到组件内改变样式
			:deep(){
				.uni-icons{
					color:$brand-theme-color !important;
				}				
			}

			.text{
				color: $brand-theme-color;
				font-weight: 600;
				font-size: 28rpx;
			}
		}
		.center{
			flex: 1;
			swiper{
				height: 100%;
				swiper-item{
					height: 100%;
					font-size: 30rpx;
					color: $text-font-color-1;
					// 文本超出部分，用省略号...表示
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
		.right{
			width: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}	
	.square{
		padding: 50rpx 0;
		.more{
			font-size: 32rpx;
			color: #888;
		}
		.content{
			margin-top: 30rpx;
			padding: 0 30rpx;
			display: grid;		// 网格布局
			gap: 30rpx;
			grid-template-columns: repeat(1, 1fr);
		}
	}
	.float-form{
		position: fixed;
		right: 50rpx;
		bottom: 160rpx;
		// 隔开安全区域
		// padding-bottom: env(safe-area-inset-bottom);
		.item{
			width: 90rpx;
			height: 90rpx;
			background: rgba(255,255,255,0.5);
			border-radius: 50%;
			margin-bottom: 20rpx;
			// 居中
			display: flex;
			align-items: center;
			justify-content: center;
			
			// 增加边框
			border: 1px solid #eee;
		}
	}
	.loadMore{
		// 隔开安全区域, 通过计算得到， + 号两侧需要空格
		padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
	}
}

</style>
